/* 使用 CSS 变量定义常用颜色和间距 */
:root {
  --main-bg-color: #f9fafb;
  --border-color: #eaecf0;
  --success-bg-color: #ecfdf3;
  --success-border-color: #abefc6;
  --success-text-color: #067647;
  --info-text-color: #1570ef;
  --secondary-text-color: #667085;
  --count-bg-color: rgba(249, 245, 255, 1);
  --count-border-color: rgba(233, 215, 254, 1);
  --count-text-color: rgba(105, 65, 198, 1);
  --amount-bg-color: rgba(249, 250, 251, 1);
  --amount-border-color: rgba(234, 236, 240, 1);
  --amount-text-color: rgba(102, 112, 133, 1);
  --primary-btn-bg-color: rgb(127, 86, 217);
  --padding-x: 10px;
  --padding-y: 10px;
  --border-radius: 8px;
}

.container {
  padding: var(--padding-y) var(--padding-x);
  box-sizing: border-box;
  font-family: MiSans;
  background: var(--main-bg-color);
}

.segmented-container {
  padding: var(--padding-y) var(--padding-x);
}

.segmented-container>.ant-segmented {
  width: 100%;
  overflow-x: scroll;
  margin: var(--padding-y) 0;
  background: var(--main-bg-color);
  border: 1px solid var(--border-color);
  padding: 5px;
}

.device-list-container,
.recipe-list-container,
.maintenance-list-container {
  padding: var(--padding-y) var(--padding-x);
}

.device-list-container {
  height: 210px;
  overflow-y: scroll;
}

.scrollable-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
}

.device-item {
  width: 280px;
  height: 100px;
  background: white;
  margin: 5px 0px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  margin-right: var(--padding-x);
  flex-shrink: 0;
}

.device-item-content {
  flex: 1;
  height: 100%;
  display: flex;
  padding-left: 20px;
  flex-direction: column;
  justify-content: center;
}

.device-item-title {
  font-weight: bold;
  white-space: nowrap;
  /* 超出容器宽度的内容隐藏 */
  overflow: hidden;
  /* 超出部分显示省略号 */
  text-overflow: ellipsis;
  /* 设置容器宽度，你可以根据实际情况调整 */
  width: 200px;
  font-size: 14px;
}

.device-status {
  float: right;
  width: 40px;
  height: 20px;
  background: var(--success-bg-color);
  border: 1px solid var(--success-border-color);
  border-radius: 16px;
  font-size: 12px;
  color: var(--success-text-color);
  margin-right: var(--padding-x);
  text-align: center;
  padding-top: 1px;
}

.device-info {
  font-size: 12px;
  color: var(--info-text-color);
}

.device-address {
  width: 192px;
  font-size: 12px;
  color: var(--secondary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recipe-container {
  height: fit-content;
  flex-wrap: wrap;
}

.recipe-item {
  width: 15%;
  height: 56px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  padding-left: var(--padding-x);
  margin: 0 8px var(--padding-y) var(--padding-x);
  flex-shrink: 0;
}

.recipe-item-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recipe-item-title {
  font-size: 12px;
  font-weight: 400;
}

.span-top10-count {
  width: 74px;
  height: 22px;
  background: var(--count-bg-color);
  border: 1px solid var(--count-border-color);
  border-radius: 16px;
  color: var(--count-text-color);
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  margin: 0 5px;
}

.span-top10-amount {
  width: 74px;
  height: 22px;
  background: var(--amount-bg-color);
  border: 1px solid var(--amount-border-color);
  border-radius: 16px;
  color: var(--amount-text-color);
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  margin: 0 5px;
}

.search-button {
  background: var(--primary-btn-bg-color);
  margin: 0px 10px;
}

.chart-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 10px;
  align-items: center;
  margin-top: var(--padding-y);
}